<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script src="/js/vue.js"></script>
    <script src="/js/index.js"></script>
    <!--展示数据-->
    <link rel="stylesheet" href="/css/index.css">
    <!--从后端获取数据-->
    <script src="/js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <el-row :gutter="20">
                <el-col :span="4">
                    <div class="grid-content bg-purple"> 后台管理系统</div>
                </el-col>
                <el-col :span="10">
                    <div class="grid-content bg-purple">
                        {{currentDateTime}}&nbsp;{{week}}
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <el-submenu index="2">
                            <template slot="title">{{staffInfo.sfUser}}-{{staffInfo.sfName}}</template>
                            <el-menu-item index="2-1">个人中心</el-menu-item>
                            <el-menu-item  index="2-2">切换账号</el-menu-item>
                            <el-menu-item index="2-3" @click="logout">退出</el-menu-item>
                        </el-submenu>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                            <a href="https://www.baidu.com" style="text-decoration: none; color:white" >百度首页</a>
                    </div>
                </el-col>
            </el-row>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-tree :data="data" :props="defaultProps" default-expand-all @node-click="handleNodeClick"></el-tree>
            </el-aside>
            <el-container>
                <el-main>
                    <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
                        <el-tab-pane
                                v-for="(item, index) in editableTabs"
                                :key="item.name"
                                :label="item.title"
                                :name="item.name">
                            <iframe :src="item.url" width="100%" height="400px;" frameborder="0"></iframe>
                        </el-tab-pane>
                    </el-tabs>
                </el-main>
                <el-footer>Footer</el-footer>
            </el-container>
        </el-container>
    </el-container>

</div>
</body>

<script>
    let vue = new Vue({
        el: "#app",
        data: function () {
            return {
                //和页签页有关属性开始
                editableTabsValue: '1',
                editableTabs: [{
                    title: '默认页',
                    name: '1',
                    // content: 'Tab 1111111111111 content'
                    url: 'http://localhost:8080/html/back/sysrole-page.html'
                }],
                tabIndex: 1,
                //和页签页有关属性结束
                //el-tree 的数据
                data: [],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                //头部导航相关属性
                currentDateTime:'',//获取当前时间
                week:'',//星期几
                activeIndex2:'1', //导航栏默认激活
                staffInfo:{} //登录人信息对象
            }
        },
        created: function () {
            this.loadDate();
            axios.get('/user/getLoginSession')
                .then(function (response) {
                    if(response.data.code==200){
                        _this.staffInfo=response.data.data;
                    }
                });

            // 调用两个方法，给头部导航栏gettime和week赋值
            this.currentTime();
            this.getWeek();
        },



        //存放方法的地方
        methods: {
            loadDate() {
                let _this = this;
                axios.get('/menu/queryTreeData')
                    .then(function (response) {
                        if (response.data.code == 200) {
                            _this.data = response.data.data;
                        }
                    })
                    .catch(function (error) {
                        console.log(error)
                    })
            },

            //树节点点击方法
            handleNodeClick(data) {
                console.log(data);
                console.log(JSON.stringify(data));
                if (data.url != null && data.url != '' && data.url != 'null' && data.url != 'undefined') {
                    //当点击左侧菜单时，添加页签
                    this.addTab(data.label, data.url);
                }

            },
            //添加页签
            addTab(targetName, url) {
                let newTabName = ++this.tabIndex + '';//让tabIndex加1

                //获取所有的标签页
                let tabs = this.editableTabs;
                //定义是否已经标签变量
                var isHaveTab = false;
                //循环所有页签页
                tabs.forEach((tab, index) => {
                    //如果为true 说明当前点击节点（部门管理），已经存在标签页
                    if (targetName === tab.title) {// 判断是否相等  1=='1' 值相等  true   1==='1'  false 类型和值都香港等
                        isHaveTab = true;
                        newTabName = tab.name;
                    }
                });

                //isHaveTab  集合中没有的时候，添加
                if (!isHaveTab) {
                    this.editableTabs.push({//向数组中添加数据
                        title: targetName,
                        name: newTabName,
                        url: url
                    });
                }
                //让它高亮
                this.editableTabsValue = newTabName;
            },
            //删除页签
            removeTab(targetName) {
                let tabs = this.editableTabs;
                let activeName = this.editableTabsValue;
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }

                this.editableTabsValue = activeName;
                this.editableTabs = tabs.filter(tab => tab.name !== targetName);
            },


            //头部导航获取当前时间
            getTime:function(){
                //获取当前时间
                let currentDate  =new Date();
                //获取到4位的年 2022
                let yy = currentDate.getFullYear();
                let mm = currentDate.getMonth()+1;
                let dd = currentDate.getDate();
                let hh = currentDate.getHours();
                //currentDate.getMinutes()<10    0-9   ->  00 - 09
                let mf = currentDate.getMinutes()<10 ? '0'+currentDate.getMinutes() : currentDate.getMinutes();
                let ss = currentDate.getSeconds()<10 ? '0'+currentDate.getSeconds() : currentDate.getSeconds();
                this.currentDateTime = yy+'-'+mm+'-'+dd+' '+hh+':'+mf+':'+ss;
            },
            //每隔0.5秒调用getTime属性
            currentTime(){
                //setInterval(param1,param2)  每个param2间隔时间调回用方法param1
                setInterval(this.getTime,500)
            },
            //获取星期几
            getWeek(){
                //java String   "abc".charAt(1)  返回某一个字符串"abc"1位置上的字符
                //.getDay() 获取星期几的数字 0-6    周日是第1天
                //.getDate() 获取档期日期的每月第几天   2020-03-12  12
                console.log("星期"+new Date().getDay());
                //charAt 返回指定字符串位置上的值  "abcdef".charAt(0) = a     "abcdef".charAt(2) = c
                this.week='星期'+"日一二三四五六".charAt(new Date().getDay());
            },
            // //用户退出方法
            // logout(){
            //     // logout 不用自己写方法  调用shiro退出配置  调用配置时 它会调用LogoutFilter 做销毁session操作
            //     axios.get('/logout')  //指定请求的url及参数  get
            //         .then(function (response) {  //正确返回对象的处理
            //             location.href="/html/login.html";
            //         })
            // }


        },

    })
</script>

<style>
    .el-header, .el-footer {
        background-color: #001529;
        color: #fff;
        text-align: center;
        line-height: 30px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 36px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 36px;
    }

    body > .el-container {
        margin-bottom: 40px;
    }


    .el-row {

        margin-top: 10px;
    }


    :last-child {
        margin-bottom: 0;
    }


    .el-col {
        border-radius: 4px;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }

    .bg-purple {
        background: #d3dce6;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }


</style>
</html>